<%--
  Created by IntelliJ IDEA.
  User: 唐清枫
  Date: 2023/9/18
  Time: 16:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.1/echarts.min.js"></script>
    <script src="../static/js/Core_values.js"></script>

</head>
<body>
<script src="../static/js/flower.js"></script>

<div id="app1" style="width: 800px;height:400px;"></div>
<div id="app2" style="width: 800px;height: 400px"></div>
<script>
    new Vue({
        el:"#app1",
        data:{
            deptName:[],
            count:[]
        },
        methods:{
            deptCounts(){
                var _this=this
                $.ajax({
                    url:"../echart/deptNumberPeople",
                    type:"get",
                    dataType:"json",
                    success:function (res) {
                        for (let i = 0; i < res.object.length; i++) {
                            _this.deptName[i]= res.object[i].deptName
                        }
                        for (let i = 0; i < res.object.length; i++) {
                            _this.count[i]= res.object[i].count
                        }

                        // 基于准备好的dom，初始化echarts实例
                        var deptCount = echarts.init(document.getElementById('app1'));

                        // 指定图表的配置项和数据
                        var option = {
                            title:{
                                text:"各部门人数"
                            },
                            xAxis: {
                                type: 'category',
                                data: _this.deptName
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    data: _this.count,
                                    type: 'bar',
                                    showBackground: true,
                                    backgroundStyle: {
                                        color: 'rgba(180, 180, 180, 0.2)'
                                    }
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        deptCount.setOption(option);
                    }
                })
            }
        },
        mounted(){
            this.deptCounts()
        }
    })
    new Vue({
        el:"#app2",
        data:{
            lineData:[]
        },
        methods:{
            select: function () {
                var v = this
                $.ajax({
                    url: "../echart/lizhi",
                    type: "get",
                    success: function (res) {
                        v.lineData = res.object
                        console.log(v.lineData)
                        var lizhi = echarts.init(document.getElementById("app2"))
                        option = {
                            title:{
                                text:"各部门离职率"
                            },
                            xAxis: {
                                type: 'category',
                                data: ['人事部', '总裁部', '测试部', '研发部', '调研部']
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    data: v.lineData,
                                    type: 'line'
                                }
                            ]
                        };
                        lizhi.setOption(option)
                    }
                })
            }
        },
        mounted:function () {
            this.select()
        }
    })

</script>
</body>
</html>
